<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>选择范围的方法</title>
	</head>
	<body>
		<p id="p">选择范围的方法<i id="i">我是I标签</i>遵从内心保持清醒<b id="b">我是B标签</b>中文输入</p>

		<script>
			const range = new Range()

			const p = document.querySelector('#p')
			const i = document.querySelector('#i')
			const b = document.querySelector('#b')

			// 1. 将 起点 和 终点 设置在 node 中的位置
			// range.setStart(p, 0)
			// range.setEnd(p, 2)
			// document.getSelection().addRange(range) // 选择范围的方法我是B标签

			// 2. 将 起点 和 终点 设置在 node 的前面
			// range.setStartBefore(p)
			// range.setEndBefore(b)
			// document.getSelection().addRange(range) // 选择范围的方法

			// 3. 将 起点 和 终点 设置在 node 的后面
			// range.setStartAfter(i)
			// range.setEndAfter(b)
			// document.getSelection().addRange(range) // 遵从内心保持清醒我是B标签

			// 4. 设置范围以选择整个 node 节点（包含节点本身）
			// range.selectNode(p)
			// document.getSelection().addRange(range) // 选择范围的方法我是I标签遵从内心保持清醒我是B标签中文输入

			// 5. 设置范围以选择整个 node 的内容（不包含节点本身）
			// range.selectNodeContents(i)
			// document.getSelection().addRange(range) // 我是I标签

			// 6. 如果 toStart=true 则设置 end=start，否则设置 start=end，从而折叠范围
			// range.setStart(p, 0)
			// range.setEnd(p, 2)
			// range.collapse(true) // true 将范围折叠到其起点。起点和终点都会被设置为相同的位置（0）
			// console.log(range.startOffset, range.endOffset) // 0 0（折叠后的范围）

			// 7. 创建一个具有相同起点/终点的新范围
			range.setStart(p, 0)
			range.setEnd(p, 2)

			const newRange = range.cloneRange()
			console.log(newRange.toString()) // 选择范围的方法我是I标签
		</script>
	</body>
</html>
